<template>
    <div class="addrole-container">
        <div class="option-box">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限</el-breadcrumb-item>
                <el-breadcrumb-item>添加权限</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 表单数据 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="data-form" status-icon>
            <el-form-item label="权限名称" prop="roleName">
                <el-input v-model="ruleForm.roleName" />
            </el-form-item>
            <el-form-item label="权限描述" prop="roleDesc">
                <el-input v-model="ruleForm.roleDesc" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="goToList">回到列表</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { putOneRole } from "@/api/RoleApi";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';


/**
 * 要提交的数据
 */
const ruleForm = reactive({
    roleName: "",
    roleDesc: ""
})

const ruleFormRef = ref<FormInstance>()

const router = useRouter();

/**
 * 表单验证规则
 */
const rules = reactive<FormRules>({
    roleName: [
        { required: true, message: '请输入权限名称！', trigger: 'blur' },
        { min: 3, max: 30, message: '权限名称必须大于3，小于30！', trigger: 'blur' },
        {
            validator: function (rule, value, callback) {
                //  校验英文的正则
                if (/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value) == false) {
                    callback(new Error("权限名称为数据库字段，请用英文,数字代替！"));
                } else {
                    //校验通过
                    callback();
                }
            }
        }
    ],
    roleDesc: [
        { required: true, message: '请输入权限描述信息！', trigger: 'blur' },
        { min: 3, max: 255, message: '权限名称必须大于3，小于255！', trigger: 'blur' },
    ]
})

/**
 * 提交表单信息
 * @param formEl 
 */
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return // 如果传入的数据为空,直接返回,不执行接下来的操作
    // 验证正则
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 调用API,执行新增操作
            putOneRole(ruleForm).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: "添加权限成功!",
                        type: 'success'
                    })
                    // 清空数据,方便再次填写
                    ruleForm.roleName = ""
                    ruleForm.roleDesc = ""
                } else {
                    ElMessage({
                        message: "添加权限失败!",
                        type: 'error'
                    })
                }
            })


        } else {
            ElMessage({
                message: "请按照要求完成信息的填写!",
                type: 'error'
            })
        }
    })
}

/**
 * 跳转到列表
 */
const goToList = () => {
    router.push('/role/list');
}

</script>
    
<style scoped lang="less">
.data-form {
    margin: 30px 0;
    width: 500px;
}

.option-box {
    margin: 5px 0;
}
</style>